<template>
  <div class="draggBox">
    <draggable v-model="draggArr" chosenClass="chosen" forceFallback="true" group="people" animation="5000" @start="onStart" @end="onEnd">
      <transition-group>
        <div class="item" v-for="ele in draggArr" :key="ele.id" :style="{ background: ele.color }">{{ele.name}}</div>
      </transition-group>
    </draggable>

  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { randColor } from '@/utils/index'

export default {
  components: { draggable },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      draggArr: [
        { people: '01', id: 1, name: '第一名', color: randColor() },
        { people: '02', id: 2, name: '第二名', color: randColor() },
        { people: '03', id: 3, name: '第三名', color: randColor() },
        { people: '04', id: 4, name: '第四名', color: randColor() }
      ],
    }
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  methods: {
    //开始拖拽事件
    onStart() { console.log("开始拖拽") },
    //拖拽结束事件
    onEnd() { console.log("结束拖拽") },
  }

}

</script>

<style scoped>
.draggBox {
  /* border: 1px solid red; */
}
/*被拖拽对象的样式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
  user-select: none;
}
/*选中样式*/
.chosen {
  border: solid 2px #161616 !important;
}
</style>